{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "07b2a8ec",
   "metadata": {},
   "source": [
    "# CartoLayer - Hello World\n",
    "\n",
    "https://docs.carto.com/deck-gl/examples/basic-examples/hello-world/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "30353b70",
   "metadata": {},
   "outputs": [],
   "source": [
    "import pydeck as pdk\n",
    "import pydeck_carto as pdkc"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "e44a2dd1",
   "metadata": {},
   "outputs": [],
   "source": [
    "pdkc.register_carto_layer()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "89ad2747",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=500\n",
       "            frameborder=\"0\"\n",
       "            srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;\n",
       "    &lt;title&gt;pydeck&lt;/title&gt;\n",
       "        &lt;script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css&quot; /&gt;\n",
       "    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css&quot; /&gt;\n",
       "    &lt;script src=&#x27;https://cdn.jsdelivr.net/npm/@deck.gl/jupyter-widget@~8.8.12/dist/index.js&#x27;&gt;&lt;/script&gt;\n",
       "    &lt;style&gt;\n",
       "    body {\n",
       "  margin: 0;\n",
       "  padding: 0;\n",
       "  overflow: hidden;\n",
       "}\n",
       "\n",
       "#deck-container {\n",
       "  width: 100vw;\n",
       "  height: 100vh;\n",
       "}\n",
       "\n",
       "#deck-container canvas {\n",
       "  z-index: 1;\n",
       "  background: none;\n",
       "}\n",
       "    &lt;/style&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       "    &lt;div id=&quot;deck-container&quot;&gt;\n",
       "    &lt;/div&gt;\n",
       "  &lt;/body&gt;\n",
       "  &lt;script&gt;\n",
       "    const container = document.getElementById(&#x27;deck-container&#x27;);\n",
       "    const jsonInput = {\n",
       "  &quot;initialViewState&quot;: {\n",
       "    &quot;latitude&quot;: 0,\n",
       "    &quot;longitude&quot;: 0,\n",
       "    &quot;zoom&quot;: 1\n",
       "  },\n",
       "  &quot;layers&quot;: [\n",
       "    {\n",
       "      &quot;@@type&quot;: &quot;CartoLayer&quot;,\n",
       "      &quot;clientId&quot;: &quot;pydeck-carto&quot;,\n",
       "      &quot;connection&quot;: &quot;bqconnection&quot;,\n",
       "      &quot;credentials&quot;: {\n",
       "        &quot;accessToken&quot;: &quot;eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiIwMGQ1NmFiMyJ9.zqsprFkxiafKXQ91PDB8845nVeWGVnuLg22v49J3Wiw&quot;,\n",
       "        &quot;apiBaseUrl&quot;: &quot;https://gcp-us-east1.api.carto.com&quot;\n",
       "      },\n",
       "      &quot;data&quot;: &quot;SELECT geom, name FROM cartobq.public_account.populated_places&quot;,\n",
       "      &quot;getFillColor&quot;: [\n",
       "        238,\n",
       "        77,\n",
       "        90\n",
       "      ],\n",
       "      &quot;id&quot;: &quot;17b770a5-a468-48c9-9fb8-5454ddd223cb&quot;,\n",
       "      &quot;onDataError&quot;: {\n",
       "        &quot;@@function&quot;: &quot;notifyError&quot;\n",
       "      },\n",
       "      &quot;pointRadiusMinPixels&quot;: 2.5,\n",
       "      &quot;type&quot;: &quot;query&quot;\n",
       "    }\n",
       "  ],\n",
       "  &quot;mapProvider&quot;: &quot;carto&quot;,\n",
       "  &quot;mapStyle&quot;: &quot;https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json&quot;,\n",
       "  &quot;views&quot;: [\n",
       "    {\n",
       "      &quot;@@type&quot;: &quot;MapView&quot;,\n",
       "      &quot;controller&quot;: true\n",
       "    }\n",
       "  ]\n",
       "};\n",
       "    const tooltip = true;\n",
       "    const customLibraries = [{&#x27;libraryName&#x27;: &#x27;CartoLayerLibrary&#x27;, &#x27;resourceUri&#x27;: &#x27;https://cdn.jsdelivr.net/combine/npm/h3-js@~3.7.*/dist/h3-js.umd.js,npm/@deck.gl/extensions@~8.8.*/dist.min.js,npm/@deck.gl/carto@~8.8.*/dist.min.js&#x27;}];\n",
       "    const configuration = {\n",
       "        functions: {\n",
       "            notifyError: () =&gt; {\n",
       "                return (e) =&gt; {\n",
       "                    document.body.style.cssText = &#x27;padding:24px;font-size:14px;font-family:monospace&#x27;;\n",
       "                    document.body.innerHTML = `&lt;b&gt;Layer Error&lt;/b&gt;: ${e.message}`;\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    };\n",
       "\n",
       "    const deckInstance = createDeck({\n",
       "                  container,\n",
       "      jsonInput,\n",
       "      tooltip,\n",
       "      customLibraries,\n",
       "      configuration\n",
       "    });\n",
       "\n",
       "  &lt;/script&gt;\n",
       "&lt;/html&gt;\"\n",
       "        ></iframe>\n",
       "    "
      ],
      "text/plain": [
       "{\n",
       "  \"initialViewState\": {\n",
       "    \"latitude\": 0,\n",
       "    \"longitude\": 0,\n",
       "    \"zoom\": 1\n",
       "  },\n",
       "  \"layers\": [\n",
       "    {\n",
       "      \"@@type\": \"CartoLayer\",\n",
       "      \"clientId\": \"pydeck-carto\",\n",
       "      \"connection\": \"bqconnection\",\n",
       "      \"credentials\": {\n",
       "        \"accessToken\": \"eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiIwMGQ1NmFiMyJ9.zqsprFkxiafKXQ91PDB8845nVeWGVnuLg22v49J3Wiw\",\n",
       "        \"apiBaseUrl\": \"https://gcp-us-east1.api.carto.com\"\n",
       "      },\n",
       "      \"data\": \"SELECT geom, name FROM cartobq.public_account.populated_places\",\n",
       "      \"getFillColor\": [\n",
       "        238,\n",
       "        77,\n",
       "        90\n",
       "      ],\n",
       "      \"id\": \"17b770a5-a468-48c9-9fb8-5454ddd223cb\",\n",
       "      \"onDataError\": {\n",
       "        \"@@function\": \"notifyError\"\n",
       "      },\n",
       "      \"pointRadiusMinPixels\": 2.5,\n",
       "      \"type\": \"query\"\n",
       "    }\n",
       "  ],\n",
       "  \"mapProvider\": \"carto\",\n",
       "  \"mapStyle\": \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n",
       "  \"views\": [\n",
       "    {\n",
       "      \"@@type\": \"MapView\",\n",
       "      \"controller\": true\n",
       "    }\n",
       "  ]\n",
       "}"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "layer = pdk.Layer(\n",
    "    \"CartoLayer\",\n",
    "    data=\"SELECT geom, name FROM cartobq.public_account.populated_places\",\n",
    "    type_=pdk.types.String(\"query\"),\n",
    "    connection=pdk.types.String(\"bqconnection\"),\n",
    "    credentials={\n",
    "        \"apiBaseUrl\": \"https://gcp-us-east1.api.carto.com\",\n",
    "        \"accessToken\": \"eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiIwMGQ1NmFiMyJ9.zqsprFkxiafKXQ91PDB8845nVeWGVnuLg22v49J3Wiw\",\n",
    "    },\n",
    "    get_fill_color=[238, 77, 90],\n",
    "    point_radius_min_pixels=2.5,\n",
    ")\n",
    "\n",
    "view_state = pdk.ViewState(latitude=0, longitude=0, zoom=1)\n",
    "\n",
    "pdk.Deck(layer, map_style=pdk.map_styles.ROAD, initial_view_state=view_state)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.10"
  },
  "vscode": {
   "interpreter": {
    "hash": "397f9d86bc6cffaf98711878e048d4ea1b6f37d57e9a5761ac2bec56bfc5b368"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
